<template>
    <div>

        <div v-myAbc>111</div>
        <div v-mybbb="'red'">222</div>
        <div v-mybbb="whichColor">222</div>
        <div v-myccc="'orange'">333</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            whichColor: 'green',
        }
    },
    // 自定义指令局部定义方式
    directives: {
        // 指令定义方式
        mybbb: {
            // vue3中指令钩子函数和生命周期钩子函数一样 ,vue2不一样
            mounted(el, binding) { // 第一个值为dom 第二个值为调用指令时传入的参数
                el.style.background = binding.value;
            },
            updated(el, binding) {
                el.style.background = binding.value
            },
            
        },
        //自定义指令简写方式: 直接写成函数形式 函数形式包括mounted+updated生命周期
        myccc(el, binding) {
            el.style.background = binding.value
        }


    }
}
</script>